<template>
	<div class="page">
		<!-- navbar -->
		<div class="navbar">
			<i class="Icon" style="color: #000000;font-size: 20px;" @click="backHandle()">arrow_back_ios_new</i>
			<div style="text-align: center;">Shop Car</div>
			<i class="Icon" style="color: #000000;font-size: 20px;opacity: 0;">arrow_back_ios_new</i>
		</div>
		<!-- goods -->
		<div class="body">
			<!-- item -->
			<div style="margin-top: 10px;padding: 0 12px;">
				<div style="display: flex;margin-top: 10px;background-color: #FFFFFF;padding: 12px;border: 1px solid #EBEBEB;align-items: center;"
					v-for="(item,index) in order.foods" :key="index">
					<van-image :src="item.img" mode="" style="width: 70px;height: 70px;border: 1px solid #EBEBEB;">
					</van-image>
					<div style="flex: 1;padding-left: 12px;line-height: 16px;">
						<!-- info -->
						<div>
							<div style="font-size: 14px;word-wrap: break-word;word-break: break-word;">{{item.name}}
							</div>
						</div>
						<div style="padding: 0 5px;padding-top: 12px;">
							<!-- food -->
							<div style="display:flex;">
								<div style="font-size: 12px;">$</div>
								<div style="font-size: 16px;font-weight: bold;">{{item.price}}</div>
							</div>
						</div>
					</div>
					<!-- action -->
					<div style="padding: 0 12px;display: flex;flex-direction: column;align-items: center;">
						<!-- btn -->
						<div>
							<i class="Icon" style="color: #4CD964;">add_circle</i>
						</div>

						<div>
							<div style="text-align: center;">1</div>
						</div>

						<!-- btn -->
						<div style="margin-top: 12px;">
							<i class="Icon" style="color: #333333;">remove_circle_outline</i>
						</div>
					</div>

				</div>
			</div>

			<div style="display: flex;flex-direction: column;background-color:#007AFF;margin-top: 12px;">
				<!-- msg -->
				<divarea value="" placeholder="enter your remark" style="background-color: #FFFFFF;flex: 1;" />

			</div>
		</div>
		<!-- button -->
		<div style="padding: 12px;padding-top: 0;">
			<div
				style="display: flex;align-items: center;justify-content: space-between;margin-top: 12px;padding: 0 12px;">
				<div>Totail Fee</div>
				<div>${{order.totalFee}}</div>
			</div>

			<!-- pay -->
			<div class="paybtn" @click="confirmHandle()">
				<div style="opacity: 0;">$12.00</div>
				<div>CheckOut</div>
				<div>${{order.totalFee}}</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				order: {
					totalFee: 0.00,
					action: undefined,
					time: undefined,
					pepoleNum: 1,
					foods: [],
					remark: "",
				},
			}
		},

		mounted() {
			let json = localStorage.getItem("shopcar");
			if (json != undefined && json.length != 0) {
				this.order = JSON.parse(json)
			}
		},



		methods: {
			backHandle() {
				this.$router.go(-1)
			},
			confirmHandle() {
				this.$router.push({
					path: "/paypage"
				})

			}
		}
	}
</script>

<style scoped>
	.page {
		height: 100vh;
		flex: 1;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	.navbar {
		height: 64px;
		padding-left: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	.body {
		flex: 1;
		background-color: #F5F5F5;
		overflow-y: auto;
	}

	.paybtn {
		height: 44px;
		background-color: #74eb41;
		margin-top: 12px;
		color: #FFFFFF;
		border: none;
		box-shadow: 0 0 3px #74eb41;
		display: flex;
		align-items: center;
		justify-content: space-around
	}
</style>
